
/**
 * 父传子--数组、对象、函数、JSX
 */
import React from "react"

// App父组件 Son子组件
// 函数式Son --- 解构赋值
function SonF ({ list, userInfo }) {
  // props是一个对象 里面存着通过父组件传入的所有数据
  return (
    <div>我是函数子组件,
      <ul>{list.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
      <div> 登录名称：{userInfo.name}</div>
    </div>
  )
}
// 类组件
class Son extends React.Component {
  render () {
    console.log(this.props, 'props')
    // 解构赋值
    const { userInfo, getMsg, child } = this.props
    return (
      // 类组件必须通过this关键词去获取 这里的props是固定的
      <div>
        我是类组件子组件,
        登录名称：{userInfo.name}
        <button onClick={getMsg}>触发父组件传入的函数</button>
        {child}
      </div>
    )
  }
}
class App extends React.Component {
  state = {
    list: [1, 2, 3],
    userInfo: {
      name: 'admin',
      password: '123456'
    }
  }
  getMsg = () => {
    console.log('父组件中的函数')
  }
  render () {
    return (
      <>
        {/* 子组件身上绑定属性 属性名可以自定义 但保持语义化 */}
        <SonF list={this.state.list} userInfo={this.state.userInfo}></SonF>
        <Son
          list={this.state.list}
          userInfo={this.state.userInfo}
          getMsg={this.getMsg}
          child={<div>this is div</div>}>

        </Son>
      </>

    )
  }
}
export default App
